<template>
  <div class="home">
    <div
      :style="{
        position: 'fixed',
        width: '100%',
        height: '100%',
        filter: 'blur(50px) brightness(60%)',
        backgroundColor: 'rgba(0,0,0,.5)',
        backgroundImage: `url(${bgcImg})`,

        zIndex: -1,
      }"
    ></div>
    <!-- 侧边栏 -->
    <div class="aside">
      <NavPlay />
      <!-- <router-view  name="NavPlay"></router-view> -->
    </div>
    <div class="contain">
      <!-- 内容 -->
      <div class="main">
        <div class="mainBox">
          <div class="mainLeft">
            <keep-alive>
              <MainPlay />
            </keep-alive>
          </div>
          <div class="mainRight">
            <transition name="route">
              <keep-alive>
                <router-view />
              </keep-alive>
            </transition>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <PlayList />
      </div>
    </div>
  </div>
</template>

<script>
import PlayList from "./footer/PlayList.vue";
import NavPlay from "./side/NavPlay.vue";
import MainPlay from "../views/main/MainPlay";
import Lyric from "../views/main/Lyric";
import RankingList from "../views/main/RankingList";
import InformationDetails from "../views/main/InformationDetails";
// import Login from '../views/main/Login'
// import PersonInfo from '../views/main/PersonInfo'

import {
  getURLInfo,
  getMusicDetailInfo,
  getDefaultDetailId,
} from "@/Api/seachApi";

export default {
  name: "Home",
  components: {
    PlayList,
    NavPlay,
    MainPlay,
    Lyric,
    RankingList,
    InformationDetails,
  },
  data() {
    return {
      bgstyle: "",
    };
  },
  computed: {
    isShowSeach() {
      return this.$store.state.musicState.isShowSeach;
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
    isClickPlay() {
      return this.$store.state.musicState.isClickPlay;
    },
    // 是否显示歌词
    // isShowLyric() {
    //   // console.log(isClickPlay)
    //   return await this.$store.state.musicState.isShowLyric;
    // },
    // 是否显示榜单页面
    // isShowRecoment() {
    //   return this.$store.state.musicState.isShowRecoment;
    // },
    // // 是否显示推荐页面
    // isRankingList() {
    //   return this.$store.state.musicState.isRankingList;
    // },
    // // 是否显示歌单详情列表
    // isCheakInfomate() {
    //   return this.$store.state.musicState.isCheakInfomate;
    // },
    bgcImg() {
      return this.$store.state.musicState.bgcImg;
    },
  },
  created() {
    this.getDetailId();
    // this.getToken();
  },
  methods: {
    // 判断是否有登录
    getToken() {
      this.axios({
        method: "GET",
        url: " https://autumnfish.cn//login/refresh",
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      let userID = localStorage.getItem("musicUserID");
      if (userID == undefined) {
        console.log("userID");
      }
    },
    // 获取默认歌曲的Id
    async getDetailId() {
      await getDefaultDetailId()
        .then((res) => {
          this.$store.commit("musicState/SetMusicID", res.result[0].id);
          this.getDefaultMusic(res.result[0].id);
          setTimeout(() => {
            this.getURL(res.result[0].id);
          }, 500);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 默认获取的歌曲
    async getDefaultMusic(id) {
      await getMusicDetailInfo(id)
        .then((res) => {
          // console.log(res);
          this.$store.commit("musicState/OneMusicPlayData", res.songs);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 传递歌曲url
    async getURL(id) {
      await getURLInfo({ id: id })
        .then((res) => {
          this.$store.commit("musicState/audioSrc", res.data[0].url);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  // 阻止多次点击
  watch: {
    "$store.state.musicState.audioSrc": function(newVal) {
      if (this.$store.state.musicState.audioSrc == newVal) {
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  .aside {
    float: left;
    height: 100%;
    width: 115px;
    // background-color: red;
    min-width: 115px;
    margin-right: 20px;
    z-index: 1000;
  }
  .contain {
    flex: 11;
    overflow: hidden;
    min-width: 90%;
    height: 100%;
    display: flex;
    // padding: 20px;
    padding-left: 0;
    padding-bottom: 0;
    flex-direction: column;
  }
  .main {
    flex: auto;
    overflow: hidden;
    padding-bottom: 10px;
    height: 100%;
    width: 100%;
    min-width: 90%;
    .mainBox {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      // background-color: red;
      display: flex;
      .mainLeft {
        flex: 7;
        min-width: 700px;
      }
      .mainRight {
        flex: 5;
        height: 100%;
        // background-color: purple;
      }
    }
  }

  .footer {
    // flex: 1;
    height: 100px;
    // background-color: green;
    .footer-bottom {
      height: 100%;
    }
  }

  // 动画过渡
  .route-enter,
  .route-leave-to,
  .recoment-enter,
  .recoment-leave-to {
    opacity: 1;
    transform: translateX(120%);
  }
  .route-enter-active,
  .route-leave-active,
  .recoment-enter-active,
  .recoment-leave-active {
    transition: all 0.5s linear;
  }
  .route-enter-to,
  .route-leave,
  .recoment-enter-to,
  .recoment-leave {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
